﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calculator</title>
    <style>
        table {
            width:150px;
            border-collapse:collapse;
           
            background-color:aliceblue;
            margin:100px;
        }
        img {
            margin-left:2px;
        }
        input {
            background-color:#B0E0E6;
            border-radius:2px;
            border-width:1px;
        }
        #bigTable{
            border-radius:9px; 
            box-shadow:black 0px 0px 20px;

        }
            table table td {
                width:40px;
                height:30px;   
               padding:0;
               
                           
            }
                table table td input {
                    width: 90%;
                      padding: 5px;
                      margin: 3px;
                      

                }


            table table {
                border-spacing:5px;
            }
        .middle {
            vertical-align:central;
            text-align:left;
        }
      
        #equal {
            height: 62px;
            width: 35px;
            font-weight:100;
        }
        #bigZero {
            width:80px;
            height:30px;
        }
        table table {
            margin:15px;
            border-width:0;
        }
        #text {
            height: 36px;
            width: 190px;
            text-align:right;
            font-size:31px;
            vertical-align:bottom;
            border:1px solid black;

            
        }
        #Ex{
            background-color:rgba(254, 21, 21, 0.73);
            width:100%;
            height:19px;
            vertical-align:top;
            padding:0px;
            border-top-right-radius:5px;

        }
        #above {
            padding:0px;
            margin:0px;
            vertical-align:top;
            text-align:right;
            width:45px;
        }
    </style>
</head>
<body>
    <form>

        <table id="bigTable">
            <thead>
                <tr>
                    <td >
                        <span>
                            <img src="Windows-7-Calculator.jpg" />
                        </span>
                    </td>
                    <td class="middle"> 
                        Calculator
                    </td>
                   
                    <td style="vertical-align:top;padding:0px;width:33px;">
                       <input type="button" value="--" class="others" style="width:100%;padding:0px;width:40px;margin:0px;" />
                    </td>
                    <td style="vertical-align:top;padding:0px;width:33px;">
                        <input type="button" value="|_|" class="others" disabled="disabled"  style="width:100%;padding:0px; width:40px;margin:0px;"/>
                        
                    </td>
                    <td id="above">
                        <input type="button" value="X" id="Ex"/>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr style="border-bottom:1px solid black; border-top:1px solid black">
                    <td>
                        View
                    </td>
                    <td>
                        Edit
                    </td>
                    <td colspan="3" style="text-align:left;">
                        Help
                    </td>
                </tr>
                <tr >
                    <td colspan="5">
                        
                        <table>
                            <tr>
                                <td colspan="5">
                                      <input type="text" id="text" value="0" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                     <input type="button" value="MC" />
                                </td>
                                <td>
                                     <input type="button" value="MR" />
                                </td>
                                <td>
                                     <input type="button" value="MS" />
                                </td>
                                <td>
                                     <input type="button" value="M+" />
                                </td>
                                <td>
                                     <input type="button" value="M-" />
                                </td>
                            </tr>
                                <tr>
                                    <td>
                                        <input type="button" value="<" />
                                    </td>
                                    <td>
                                        <input type="button" value="CE" />
                                    </td>
                                     <td>
                                        <input type="button" value="C" />
                                    </td>
                                     <td>
                                        <input type="button" value="+-" />
                                    </td> 
                                    <td>
                                        <input type="button" value="sqr" />
                                    </td>
                                </tr>
                            <tr>
                                 <td>
                                        <input type="button" value="7" />

                                    </td>
                                 <td>
                                        <input type="button" value="8" />
                                    </td>
                                 <td>
                                        <input type="button" value="9" />
                                    </td>
                                 <td>
                                        <input type="button" value="/" />
                                    </td>
                                 <td>
                                        <input type="button" value="%" />
                                    </td>
                            </tr>
                            <tr>
                                 <td>
                                        <input type="button" value="4" />
                                    </td>
                                 <td>
                                        <input type="button" value="5" />
                                    </td>
                                 <td>
                                        <input type="button" value="6" />
                                    </td>
                                 <td>
                                        <input type="button" value="*" />
                                    </td>
                                 <td>
                                        <input type="button" value="1/x" />
                                    </td>
                            </tr>
                            <tr>
                                 <td>
                                        <input type="button" value="1" />
                                    </td>
                                 <td>
                                        <input type="button" value="2" />
                                    </td>
                                 <td>
                                        <input type="button" value="3" />
                                </td>
                                 <td>
                                        <input type="button" value="-" />
                                </td>
                                 <td rowspan="2" >
                                        <input type="button" value="=" id="equal" />
                                </td>
                            </tr>
                            <tr>
                                 <td colspan="2">
                                        <input type="button" value="0" id="bigZero"/>
                                </td>
                                 
                                 <td>
                                        <input type="button" value="," />
                                 </td>
                                 <td>
                                        <input type="button" value="+" />
                                    </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>


        </table>


    </form>
</body>
</html>
